<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>VLIUI</title>
    <link href="./static/css/bootstrap.css" rel="stylesheet" />
    <link href="./static/css/font-awesome.min.css" rel="stylesheet" />
    <link href="./static/css/animate.css" rel="stylesheet" />
    <link href="./static/plugins/contextMenu/jquery.contextMenu.min.css" rel="stylesheet" />
    <link href="./static/css/styles.css" rel="stylesheet" />
    <link href="./static/css/theme-all.css" rel="stylesheet" />
</head>

<body>
    <div class="wrapper">
        <div class="main-head">
            <div class="head-logo-panel">
                <a class="head-logo" href="#"><span class="logo-title">VLI后台主题UI</span></a>
                <a href="#" class="mini-head-logo">
                    <!--     <img src="./static/img/logo.png"> -->
                    VLI
                </a>
            </div>
            <div class="head-menu-panel">
                <ul class="head-menu pull-left">
                    <li>
                        <a class="mini-switch-bar" href="javascript:;"><i class="fa fa-bars"></i></a>
                    </li>
                    <li>
                        <a href="javascript:;">菜单一</a>
                    </li>
                    <li>
                        <a href="javascript:;">菜单二</a>
                    </li>
                    <li class="hoverdown">
                        <a href="javascript:;" class="hoverdown-toggle">菜单组 <span class="caret"></span></a>
                        <div class="hoverdown-menu">
                            <ul>
                                <li><a href="#">子菜单一</a></li>
                                <li><a href="#">子菜单二</a></li>
                                <li><a href="#">子菜单三</a></li>
                            </ul>
                        </div>
                    </li>
                </ul>
                <ul class="head-menu pull-right navbar-right">

                    <li><a title="全屏显示" href="javascript:;" id="fullScreen">
                            <i class="fa fa-fw fa-arrows-alt"></i>
                            全屏显示</a>
                    </li>
                    <li class="hoverdown head-message">
                        <a href="javascript:;" class="count-info hoverdown-toggle"><i class="fa fa-envelope"><label
                                    class="badge badge-warning">8</label></i></a>
                        <div class="hoverdown-menu">
                            <ul>
                                <li>
                                    <a href="javascript:;" class="head-message-link" onclick="">
                                        <div class="head-message-avatar">
                                            <img src="./static/img/avatar.jpg">
                                        </div>
                                        <div class="head-message-content">
                                            <div class="head-message-title"><b>王佳乐</b><small
                                                    class="pull-right">5小时前</small></div>
                                            <div class="head-message-text">你好，我是系统管理员，很高兴您能访问本系统。请问能为您做点什么嘛？</div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:;" class="head-message-link" onclick="">
                                        <div class="head-message-avatar">
                                            <img src="./static/img/avatar3.jpg">
                                        </div>
                                        <div class="head-message-content">
                                            <div class="head-message-title"><b>王佳乐</b><small
                                                    class="pull-right">5小时前</small></div>
                                            <div class="head-message-text">你好，我是系统管理员，很高兴您能访问本系统。请问能为您做点什么嘛？</div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:;" class="head-message-link" onclick="">
                                        <div class="head-message-avatar">
                                            <img src="./static/img/avatar2.jpg">
                                        </div>
                                        <div class="head-message-content">
                                            <div class="head-message-title"><b>王佳乐</b><small
                                                    class="pull-right">5小时前</small></div>
                                            <div class="head-message-text">你好，我是系统管理员，很高兴您能访问本系统。请问能为您做点什么嘛？</div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:;" class="head-message-link" onclick="">
                                        <div class="head-message-avatar">
                                            <img src="./static/img/avatar1.jpg">
                                        </div>
                                        <div class="head-message-content">
                                            <div class="head-message-title"><b>王佳乐</b><small
                                                    class="pull-right">5小时前</small></div>
                                            <div class="head-message-text">你好，我是系统管理员，很高兴您能访问本系统。请问能为您做点什么嘛？</div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:;" class="text-center" onclick="">查看更多</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="hoverdown head-notice">
                        <a href="javascript:;" class="count-info"><i class="fa fa-bell"><label
                                    class="badge badge-warning">8</label></i></a>
                        <div class="hoverdown-menu">
                            <div class="panel panel-primary">
                                <div class="panel-heading">
                                    您有15条未读消息
                                </div>
                                <div class="head-notice-group">
                                    <a class="head-notice-content" href="javascript:;">
                                        <div class="head-notice-text ">
                                            <i class="fa fa-fw fa-info-circle"></i>系统上线啦，欢迎大家使用！
                                        </div>
                                        <div class="head-notice-right">
                                            5分钟前
                                        </div>
                                    </a>
                                    <a class="head-notice-content" href="javascript:;">
                                        <div class="head-notice-text ">
                                            <i class="fa fa-fw fa-info-circle"></i>系统上线啦，欢迎大家使用！
                                        </div>
                                        <div class="head-notice-right">
                                            5分钟前
                                        </div>
                                    </a>
                                    <a class="head-notice-content" href="javascript:;">
                                        <div class="head-notice-text ">
                                            <i class="fa fa-fw fa-info-circle"></i>系统上线啦，欢迎大家使用！
                                        </div>
                                        <div class="head-notice-right">
                                            5分钟前
                                        </div>
                                    </a>
                                    
                                </div>
                                <div class="panel-footer text-center">
                                    <a href="javascript:;" class="font-12 text-default">查看所有</a>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <a href="javascript:;" data-placement="bottom" data-toggle="tooltip" data-original-title="主题设置"
                            onclick="changeTheme()"><i class="fa fa-tachometer"></i></a>
                    </li>
                    <li class="hoverdown">
                        <a href="#" class="head-menu hoverdown-toggle"><img class="head-avatar"
                                src="./static/img/avatar.jpg">超级管理员<span class="caret"></span></a>
                        <div class="hoverdown-menu">
                            <ul>
                                <li>
                                    <a class="menuItem" href="./pages/examples/pages/profile.html">
                                        <i class="fa fa-user-circle-o"></i> 个人中心</a>
                                </li>
                                <li>
                                    <a href="javascript:;" onclick="">
                                        <i class="fa fa-key"></i> 修改密码</a>
                                </li>
                                <li class="divider"></li>
                                <li>
                                    <a href="javascript:;">
                                        <i class="fa fa-sign-out"></i> 退出登录</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="main-left ">
            <div class="sidebar-collapse">
                <ul class="menubar" id="side-menu">
                    <li>
                        <a class="menuItem" href="./pages/examples/pages/home.html"> <i class="fa fa-home"></i>
                            <span class="nav-label">首页</span>
                        </a>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-tachometer"></i>
                            <span class="nav-label">UI元素</span> <span class="fa arrow"></span>
                        </a>
                        <ul class="menubar menubar-second">
                            <li>
                                <a class="menuItem" href="./pages/element/general/gird.html">栅格</a>
                            </li>
                            <li>
                                <a class="menuItem" href="./pages/element/general/typography.html">排版</a>
                            </li>
                            <li>
                                <a class="menuItem" href="./pages/element/general/code.html">代码</a>
                            </li>
                            <li>
                                <a class="menuItem" href="./pages/element/general/table.html">表格</a>
                            </li>
                            <li>
                                <a class="menuItem" href="./pages/element/general/button.html">按钮</a>
                            </li>
                            <li>
                                <a class="menuItem" href="./pages/element/general/icon.html">图标</a>
                            </li>
                            <li>
                                <a class="menuItem" href="./pages/element/general/dropdown.html">下拉菜单</a>
                            </li>
                            <li>
                                <a class="menuItem" href="./pages/element/general/tabs.html">选项卡</a>
                            </li>
                            <li>
                                <a class="menuItem" href="./pages/element/general/listgroup.html">列表组</a>
                            </li>
                            <li>
                                <a href="#">面板<span class="fa arrow"></span></a>
                                <ul class="menubar menubar-third">
                                    <li>
                                        <a class="menuItem" href="./pages/element/general/panel.html">基础面板</a>
                                    </li>
                                    <li>
                                        <a class="menuItem" href="./pages/element/general/panel-senior.html">组合面板</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a class="menuItem" href="./pages/element/general/pagination.html">分页</a>
                            </li>
                            <li>
                                <a class="menuItem" href="./pages/element/general/progress.html">进度条</a>
                            </li>
                            <li>
                                <a class="menuItem" href="./pages/element/general/alerts.html">警告框</a>
                            </li>
                            <li>
                                <a class="menuItem" href="./pages/element/general/general.html">一般元素</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-pencil-square-o"></i>
                            <span class="nav-label">表单相关</span> <span class="fa arrow"></span>
                        </a>
                        <ul class="menubar menubar-second">
                            <li>
                                <a class="menuItem" href="./pages/element/form/form-basic.html">基本表单</a>
                            </li>
                            <li>
                                <a class="menuItem" href="./pages/element/form/form-extend.html">扩展表单</a>
                            </li>
                            <li>
                                <a class="menuItem" href="./pages/element/form/form-laydate.html">日期时间</a>
                            </li>
                            <li>
                                <a class="menuItem" href="./pages/element/form/form-layout.html">表单布局</a>
                            </li>
                            <li>
                                <a class="menuItem" href="./pages/element/form/form-validate.html">表单验证</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-tags"></i>
                            <span class="nav-label">弹出窗口</span> <span class="fa arrow"></span>
                        </a>
                        <ul class="menubar menubar-second">
                            <li>
                                <a class="menuItem" href="./pages/element/modal/modal.html">模态框</a>
                            </li>
                            <li>
                                <a class="menuItem" href="./pages/element/modal/layer.html">弹窗插件</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-table"></i>
                            <span class="nav-label">表格应用</span> <span class="fa arrow"></span>
                        </a>
                        <ul class="menubar menubar-second">
                            <li>
                                <a class="menuItem" href="./pages/element/table/table-basic.html">基础表格</a>
                            </li>
                            <li>
                                <a class="menuItem" href="./pages/element/table/table-search.html">查询表格</a>
                            </li>
                            <li>
                                <a class="menuItem" href="./pages/element/table/table-title.html">复杂表头</a>
                            </li>
                            <li>
                                <a class="menuItem" href="./pages/element/table/table-footer.html">表尾表格</a>
                            </li>
                            <li>
                                <a class="menuItem" href="./pages/element/table/table-selected.html">选中翻页保持</a>
                            </li>
                            <li>
                                <a class="menuItem" href="./pages/element/table/table-pagego.html">翻页跳转</a>
                            </li>
                            <li>
                                <a class="menuItem" href="./pages/element/table/table-fixcolumn.html">固定表格列</a>
                            </li>
                            <li>
                                <a class="menuItem" href="./pages/element/table/table-event.html">表格事件</a>
                            </li>
                            <li>
                                <a class="menuItem" href="./pages/element/table/table-detail.html">表格详情</a>
                            </li>
                            <li>
                                <a class="menuItem" href="./pages/element/table/table-customView.html">自定义显示</a>
                            </li>
                            <li>
                                <a class="menuItem" href="./pages/element/table/table-image.html">表格图片预览</a>
                            </li>
                            <li>
                                <a class="menuItem" href="./pages/element/table/table-dragRow.html">表格行拖拽</a>
                            </li>
                            <li>
                                <a class="menuItem" href="./pages/element/table/table-dragColumn.html">表格列拖拽</a>
                            </li>
                            <li>
                                <a class="menuItem" href="./pages/element/table/table-resize.html">列宽拖动</a>
                            </li>
                            <li>
                                <a class="menuItem" href="./pages/element/table/table-edit.html">行内编辑</a>
                            </li>
                            <li>
                                <a class="menuItem" href="./pages/element/table/table-formTableData.html">表单动态表格</a>
                            </li>
                            <li>
                                <a class="menuItem" href="./pages/element/table/table-autoRefresh.html">自动刷新</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-paper-plane"></i>
                            <span class="nav-label">组件插件</span> <span class="fa arrow"></span>
                        </a>
                        <ul class="menubar menubar-second">
                            <li>
                                <a class="menuItem" href="./pages/element/module/tagsinput.html">标签输入</a>
                            </li>
                            <li>
                                <a class="menuItem" href="./pages/element/module/selecttree.html">下拉树插件</a>
                            </li>
                            <li>
                                <a class="menuItem" href="./pages/element/module/ueditor.html">UEditor富文本</a>
                            </li>
                            <li>
                                <a class="menuItem" href="./pages/element/module/smartwizard.html">表单向导</a>
                            </li>
                            <li>
                                <a class="menuItem" href="./pages/element/module/formatter.html">格式化输入</a>
                            </li>
                            <li>
                                <a class="menuItem" href="./pages/element/module/colpick.html">颜色选择</a>
                            </li>
                            <li>
                                <a class="menuItem" href="./pages/element/module/sliders.html">滑块插件</a>
                            </li>
                            <li>
                                <a class="menuItem" href="./pages/element/module/animate.html">动画效果</a>
                            </li>
                            <li>
                                <a class="menuItem" href="./pages/element/module/toastr.html">Toastr通知</a>
                            </li>
                            <li>
                                <a href="#">树形控件<span class="fa arrow"></span></a>
                                <ul class="menubar menubar-third">
                                    <li>
                                        <a class="menuItem" href="./pages/element/module/tree-ztree.html">Ztree</a>
                                    </li>
                                    <li>
                                        <a class="menuItem" href="./pages/element/module/tree-table.html">树表格</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a class="menuItem" href="./pages/element/module/layout.html">布局控件</a>
                            </li>
                            <li>
                                <a class="menuItem" href="./pages/element/module/timeline.html">时间轴</a>
                            </li>
                            <li>
                                <a class="menuItem" href="./pages/element/module/swiper.html">轮播图</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-bar-chart"></i>
                            <span class="nav-label">图表插件</span> <span class="fa arrow"></span>
                        </a>
                        <ul class="menubar menubar-second">
                            <li>
                                <a href="#">Echarts图表<span class="fa arrow"></span></a>
                                <ul class="menubar menubar-third">
                                    <li>
                                        <a class="menuItem" href="./pages/element/charts/echarts-line.html">折线图</a>
                                    </li>
                                    <li>
                                        <a class="menuItem" href="./pages/element/charts/echarts-bar.html">柱状图</a>
                                    </li>
                                    <li>
                                        <a class="menuItem" href="./pages/element/charts/echarts-pie.html">饼图</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-arrows"></i>
                            <span class="nav-label">拖拽模块</span> <span class="fa arrow"></span>
                        </a>
                        <ul class="menubar menubar-second">
                            <li>
                                <a class="menuItem" href="./pages/element/module/drag-draggable.html">拖拽示例</a>
                            </li>
                            <li>
                                <a class="menuItem" href="./pages/element/module/drag-selectable.html">拖拽选择</a>
                            </li>
                            <li>
                                <a class="menuItem" href="./pages/element/module/drag-sortable.html">拖拽排序</a>
                            </li>
                            <li>
                                <a class="menuItem" href="./pages/element/module/drag-droppable.html">放置示例</a>
                            </li>
                            <li>
                                <a class="menuItem" href="./pages/element/module/drag-form.html">表单构建示例</a>
                            </li>
                            
                            
                        </ul>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-tv"></i>
                            <span class="nav-label">常用页面</span> <span class="fa arrow"></span>
                        </a>
                        <ul class="menubar menubar-second">
                            <li>
                                <a class="menuItem" href="./pages/examples/pages/mail.html" data-tab-title="收件箱">收件箱
                                    <span class="pull-right badge badge-warning">12</span></a>
                            </li>
                            <li>
                                <a class="menuItem" href="./pages/examples/pages/user.html">用户管理</a>
                            </li>
                            <li>
                                <a class="menuItem" href="./pages/examples/pages/setting.html">系统设置</a>
                            </li>
                            <li>
                                <a class="menuItem" href="./pages/examples/pages/menu.html">菜单管理</a>
                            </li>
                            <li>
                                <a class="menuItem" href="./pages/examples/pages/project.html">项目管理</a>
                            </li>
                            <li>
                                <a class="menuItem" href="./pages/examples/pages/article.html">文章管理</a>
                            </li>
                            <li>
                                <a class="menuItem" href="./pages/examples/pages/profile.html">个人资料</a>
                            </li>
                            <li><a href="#">登录页面<span class="fa arrow"></span></a>
                                <ul class="menubar menubar-third">
                                    <li>
                                        <a target="_blank" href="./login1.html">登录页面一</a>
                                    </li>
                                    <li>
                                        <a target="_blank" href="./login2.html">登录页面二</a>
                                    </li>
                                    <li>
                                        <a target="_blank" href="./login3.html">登录页面三</a>
                                    </li>
                                    <li>
                                        <a target="_blank" href="./login4.html">登录页面四</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a class="menuItem" href="./pages/examples/pages/error.html">错误页面</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-server"></i>
                            <span class="nav-label">多级菜单</span> <span class="fa arrow"></span>
                        </a>
                        <ul class="menubar menubar-second">
                            <li>
                                <a class="menuItem" href="">多级菜单一</a>
                            </li>
                            <li><a href="#">多级菜单一<span class="fa arrow"></span></a>
                                <ul class="menubar menubar-third">
                                    <li>
                                        <a class="menuItem" href="">多级菜单二</a>
                                    </li>
                                    <li>
                                        <a class="menuItem" href="">多级菜单二<span class="fa arrow"></span></a>
                                        <ul class="menubar menubar-forth">
                                            <li>
                                                <a class="menuItem" href="">多级菜单三</a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>

        <div class="main-content">
            <div class="content-tabs">
                <button class="roll-nav roll-left tabLeft">
                    <i class="fa fa-backward"></i>
                </button>
                <nav class="page-tabs menuTabs">
                    <div class="page-tabs-content">
                        <a href="javascript:;" class="active menuTab" data-id="./pages/examples/pages/home.html">首页</a>
                    </div>
                </nav>
                <button class="roll-nav roll-right tabRight">
                    <i class="fa fa-forward"></i>
                </button>
                <a href="javascript:void(0);" class="roll-nav roll-right tabReload"><i class="fa fa-refresh"></i> 刷新</a>
            </div>
            <div class="content-main" id="content-main">
                <iframe class="index_iframe" name="iframe0" width="100%" height="100%"
                    data-id="./pages/examples/pages/home.html" src="./pages/examples/pages/home.html" frameborder="0"
                    seamless></iframe>
            </div>
        </div>
    </div>
    <!-- jquery -->
    <script src="./static/js/jquery.min.js"></script>

    <!-- bootstrap -->
    <script src="./static/js/bootstrap.js"></script>

    <!-- layer 插件 -->
    <script src="./static/plugins/layer/layer.min.js"></script>

    <!-- 遮罩层插件 -->
    <script src="./static/plugins/blockUI/jquery.blockUI.js"></script>

    <!-- 菜单插件 -->
    <script src="./static/plugins/metisMenu/jquery.metisMenu.js"></script>

    <!-- 全屏插件 -->
    <script src="./static/plugins/fullscreen/jquery.fullscreen.js"></script>

    <!-- 滚动条插件 -->
    <script src="./static/plugins/slimscroll/jquery.slimscroll.min.js"></script>

    <!-- 右键菜单插件 -->
    <script src="./static/plugins/contextMenu/jquery.contextMenu.min.js"></script>

    <script src="./static/js/common-core.js"></script>
    <!-- tab任务栏处理类 -->
    <script src="./static/js/common-tabs.js"></script>

    <script src="./static/js/common-extend.js"></script>

    <script src="./static/js/index.js"></script>
    <script>
        function changeTheme() {
            $.modal.openDetail('主题切换', './pages/examples/pages/setting-theme.html');
        }
    </script>
</body>

</html>